<template>
  <!-- Vue3不需要根标签了 -->
  <div class="title">hello vue3</div>
  <p v-memo="[count]">{{ count }}</p>
  <p>{{ count }}</p>
  <button @click="count++">更新</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
/*
  1. 常用指令
    v-for 
      列表渲染（遍历展示数据）
      遍历的每项元素需要添加一个唯一的key属性，key属性的值用id

      虚拟DOM Diff算法？
      key的作用？ 尽可能复用DOM元素

    v-if / v-else-if / v-else
      条件渲染（让元素显示&隐藏）
    v-show
      条件渲染（让元素显示&隐藏）

      v-if和v-show的区别
        隐藏时对DOM元素操作不一样
        v-if，会删除DOM元素
        v-show，会通过样式display:none隐藏元素

      v-for和v-if如果同时给元素设置，谁先执行？
        vue2中，v-for先执行。
          解决：使用计算属性，先对需要隐藏的元素进行处理（filter），页面在遍历过滤后的元素
        vue3中，v-if先执行

    v-on
      绑定事件
      简写：@

      @click="handleClick"      事件回调函数的参数：event
      @click="handleClick()"    事件回调函数的参数：无
      @click="handleClick(111)" 事件回调函数的参数：111
      @click="handleClick(111, $event)" 事件回调函数的参数：111, event
      @click="count++"

      事件修饰符
        .prevent
        .native 绑定原生DOM事件（vue3移除了）
        .stop
        .once
      
    v-bind
      强制绑定数据（单向数据绑定）
      简写：:

    v-model
      双向数据绑定
        双向数据原理？v-model="xxx"
          1. 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
          2. <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
          3. <select> 会绑定 value property 并侦听 change 事件
          
        响应式原理？
          数据代理
          数据劫持
          模板解析

    v-memo(vue3新增的指令)
      keep-alive 用来缓存路由组件
      v-memo 用来缓存组件中部分DOM元素
        v-memo="[依赖项]" 当依赖项发送变化，这个元素才会重新渲染，否则不会重新渲染

    v-slot 插槽
      简写：#
      
  2. 不常用的指令
    v-text 设置textContent属性
    v-html 设置innerHTML属性
    v-pre  跳过渲染
    v-cloak 隐藏未解析的模板
    v-once 只解析一次，后面更新就不解析
*/

export default defineComponent({
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
});
</script>

<style scoped>
.title {
  color: red;
}
</style>
